<!DOCTYPE html>
<html>
<head>
    <title>区域医疗大数据系统BI可视化后台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <!-- jQuery AND jQueryUI -->
    <script type="text/javascript" src="js/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

    <!-- Compressed Version
    <link type="text/css" rel="stylesheet" href="min/b=CoreAdmin&f=css/reset.css,css/style.css,css/jqueryui/jqueryui.css,js/jwysiwyg/jquery.wysiwyg.old-school.css,js/zoombox/zoombox.css" />
    <script type="text/javascript" src="min/b=CoreAdmin/js&f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.min.js,main.js"></script>
    -->
    <link rel="stylesheet" href="css/min.css" />
    <script type="text/javascript" src="js/min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>

<script type="text/javascript" src="content/settings/main.js"></script>
<link rel="stylesheet" href="content/settings/style.css" />


<div class="settings" id="settings"></div>
<!--   HEAD -->
<div id="head">
    <div class="left">
        区域医疗大数据系统可视化管理界面
    </div>
    <div class="right">

    </div>
</div>


<!--
        SIDEBAR
                 -->
<div id="sidebar">
    <ul>
        <li>
            <a href="index">
                <img src="img/icons/menu/inbox.png" alt="" />
                BI仪表盘概览
            </a>
        </li>
        <li class="current"><a href="#"><img src="img/icons/menu/layout.png" alt="" /> 病例离线数据分析</a>
            <ul>
                <li class="current"><a href="dashboard.html?p=index">病例随机抽取</a></li>
                <li><a href="forms.html?p=forms">病例范围占比统计</a></li>
                <li><a href="table.html?p=table">Top10热门病种</a></li>
                <li><a href="tabs.html?p=tabs">名区域top3病种统计</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/icons/menu/brush.png" alt="" /> 药物分析</a>
            <ul>
                <li><a href="#">Fake menu #1</a></li>
                <li><a href="#">Fake menu #2</a></li>
                <li><a href="#">Fake menu #3</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/icons/menu/lab.png" alt="" /> 区域实时数据分析</a>
            <ul>
                <li><a href="#">病例实时流量分析</a></li>
                <li><a href="#">名省热门病例实时统计</a></li>
                <li><a href="#">最近一天病例实时流量统计</a>
                </li>
            </ul>
        </li>

    </ul>


</div>

<!--
      CONTENT
                -->
<div id="content" class="white">
    <h1><img src="img/icons/dashboard.png" alt="" /> 病例离线数据分析
    </h1>

    <div class="cb">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 100%;height:800px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();  // 开启 loading 效果

            // [
            //     {
            //         "taskId":"2",
            //         "categoryId":111,
            //         "clickCount":22,
            //         "orderCount":56,
            //         "payCount":74
            //     },
            //     {
            //         "taskId":"1",
            //         "categoryId":2,
            //         "clickCount":3,
            //         "orderCount":4,
            //         "payCount":5
            //     },
            //     {
            //         "taskId":"11",
            //         "categoryId":12,
            //         "clickCount":13,
            //         "orderCount":14,
            //         "payCount":15
            //     },
            //     {
            //         "taskId":"16",
            //         "categoryId":17,
            //         "clickCount":18,
            //         "orderCount":19,
            //         "payCount":20
            //     },
            //     {
            //         "taskId":"21",
            //         "categoryId":22,
            //         "clickCount":23,
            //         "orderCount":24,
            //         "payCount":25
            //     },
            //     {
            //         "taskId":"26",
            //         "categoryId":27,
            //         "clickCount":28,
            //         "orderCount":29,
            //         "payCount":30
            //     },
            //     {
            //         "taskId":"31",
            //         "categoryId":32,
            //         "clickCount":33,
            //         "orderCount":34,
            //         "payCount":35
            //     },
            //     {
            //         "taskId":"36",
            //         "categoryId":37,
            //         "clickCount":38,
            //         "orderCount":39,
            //         "payCount":40
            //     },
            //     {
            //         "taskId":"41",
            //         "categoryId":42,
            //         "clickCount":43,
            //         "orderCount":44,
            //         "payCount":45
            //     },
            //     {
            //         "taskId":"46",
            //         "categoryId":47,
            //         "clickCount":48,
            //         "orderCount":49,
            //         "payCount":50
            //     }
            // ]

            $.get('http://localhost:8888/top10Category', function (data) {
                var keys=[];
                for(var j=0;j<data.length;j++){
                    for(var i in data[j]){
                        var dict={};
                        if ( i=="payCount"){
                            dict["value"]=data[j][i];
                            dict["name"]=i+String(j+1);
                            keys.push(dict);//i就是它的键
                        }
                    }
                }
                // var keys_json=JSON.parse(keys);
                var keys_json = JSON.parse(JSON.stringify(keys));

                myChart.hideLoading();  // 隐藏 loading 效果
                myChart.setOption({
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: keys_json
                        }
                    ]
                })
            }, 'json');

            // 使用刚指定的配置项和数据显示图表。
            //myChart.setOption(option);
        </script>

    </div>

</div>

<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>

</body>
</html>